<template>
    <div>
        <div id="data" style="margin:30px;">
            <el-button style="margin:0px 15px;">总用户下注量 : <b>{{total.betting}}</b></el-button>
            <el-button style="margin:0px 15px;">总用户筹码量 : <b>{{total.winChip}}</b></el-button>
            <el-date-picker style="margin:0px 15px;" @change="changeDate1" placeholder="开始时间" type="date" v-model="forms.beginDate"></el-date-picker>
            <el-date-picker style="margin:0px 15px;" @change="changeDate2" placeholder="结束时间" type="date" v-model="forms.endDate"></el-date-picker>
            <el-button @click="Count()">查询</el-button>
        </div>
        <div id="myChart" style="clear:both;width:80vw!important;height:450px;">
        </div>
    </div>
    
</template>

<script>
import dateformat from 'dateformat'
export default {
  name: 'hello',
  data () {
    return {
      total:[],
      addup:[],
      forms:{
          beginDate:'',
          endDate: '',
          
      },
    }
  },
  mounted(){
      this.usertotal();
      var myDate = new Date().getTime()//获取当前时间
      this.forms.beginDate=myDate-7200000;
      this.forms.endDate=myDate;
      this.Count();
      console.log('myDate')
      console.log(myDate)
  },
  methods: {
      //总用户下注量和筹码量
    usertotal(){
        this.$api.userCensus(this.form).then(res=>{
            if(res.code=='000000'){
              this.total = res.data;
            }
          });
    },
    //每分钟统计数据
    Count(){
        this.$api.usercount(this.forms).then(res=>{
            if(res.code=='000000'){
                 if(res.data.length==0){
                    this.$alert('您所查询的条件不存在！！！', '查询错误', {dangerouslyUseHTMLString: true});
                } else{
                    this.addup = res.data;
                    this.drawLine(this.addup);
                    }
             }
          });
        console.log('22222222')
        console.log(this.addup)
    },
    //时间转换
    judgeTime (date) {
        if (date) {
            let dateTime = new Date(date)
            let sysdate = dateformat(dateTime, 'yyyy-mm-dd HH:MM')
            return sysdate
        } else {
            return date
        }
    },
    //转时间戳
    changeDate1 (val) {
        val ? this.forms.beginDate = Date.parse(val) : this.forms.beginDate = undefined
    },
    changeDate2 (val) {
        val ? this.forms.endDate = Date.parse(val) : this.forms.endDate = undefined
    },
    drawLine(value){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        var arr = [];//每分钟更新时间数组
        var winChip=[];//筹码
        var betting=[];//下注
        value.forEach((item)=>{
              winChip.push(item.winChip)
              betting.push(item.betting)
        }),
        value.forEach((item)=>{
            var time = '';
            time = this.judgeTime(item.sysTime);
              arr.push(time)
        }),
        // 绘制图表
        myChart.setOption({
            title: {
                left: '5%',
                text: '大数据量面积图',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['投注量', '筹码量']
            },
            //切换
            toolbox: {
                show: true,
                feature: {
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                
                }
            },
            dataZoom: [{
                show: true,
                realtime: true,
                start: 30,
                end: 70,
            
          }],
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: arr
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name:'投注量',
                    type:'line',
                    data:winChip
                },
                {
                    name:'筹码量',
                    type:'line',
                    data:betting
                }
            ]
        });
    }
  }
}
</script>
